<template>

  <div class="content">
    <!--加载中-->
    <Spin size="large" fix v-if="spinShow"></Spin>
    <!--导航-->
    <div class="banner">
      <div class="banner_center">
        本次测试共 {{topicNum}}题，满分{{branch}}分，{{qualified}}分合格，答题时间：{{examTime}}
        <Button class="banner_btn" type="primary" shape="circle" :loading="loading" @click="toLoading">
          <span v-if="!loading">提交试卷</span>
          <span v-else>提交中...</span>
        </Button>
        <Modal
          v-model="modal1"
          title="提交试卷"
          @on-ok="ok"
          @on-cancel="cancel">
          <div style="text-align: center">提交试卷后结束答题</div>
          <div style="text-align: center">事实显示本次成绩</div>
          <div style="text-align: center">是否确认交卷?</div>
        </Modal>
      </div>
    </div>
    <!--答题-->
    <div class="answer">
      <!--做题板块-->
      <div class="answer_three">
        <div class="answer_three_header">
          已答 <span class="zi_lan">{{switchNum}}</span> 题 / 共 <span>{{topicNum}} </span>题
          <div class="time">剩余时间: {{minute}}</div>
        </div>
        <div class="answer_three_tips">
          <div v-if="Diagnosis==1"><span class="zi_lan">单选题</span> &nbsp;(共{{dan}}道题，每题{{danfen}}分，每题有且仅有一个正确答案)</div>
          <div v-if="Diagnosis==2"><span class="zi_lan">多选题</span> &nbsp;(共{{duo}}道题，每题{{duofen}}分，每题有多个正确答案)</div>
          <div v-if="Diagnosis==3"><span class="zi_lan">判断题</span> &nbsp;(共{{pan}}道题，每题{{panfen}}分，每题有且仅有一个正确答案)</div>
          <div v-if="Diagnosis==5"><span class="zi_lan">填空题</span> &nbsp;(共{{tian}}道题，每题{{tianfen}}分，每题有且仅有一个正确答案)</div>
        </div>
        <div class="subject">
          {{title}}、{{content}}
        </div>
        <ul>
          <li v-on:click="choice(index)" v-for="(item,index) in items">
            <div :class="item.state==1?'li_lan':(item.state==2?'li_red':(item.state==3?'li_red':''))"></div>
            {{item.one}}
          </li>
          <li v-if="Diagnosis==5">
            请输入答案:    <input type="text" v-model="inputValue" style="border:0;border-bottom:1px solid black;"  @blur="inputit()">
          </li>
        </ul>
        <!--标记-->
        <div class="sign" v-bind:class="hoverBiao==true?'':'hoverBiao'" v-on:click="sign()">
          {{signBtn}}
        </div>
        <!--下一题-->
        <div class="upDown">
          <div v-if="title != 1" class="up" v-on:click="up()">上一题</div>
          <div v-if="topicNum != title" class="down" v-on:click="down()">下一题</div>
        </div>
      </div>
      <!--图例板块-->
      <div class="answer_one">
        <div>
          图例
        </div>
        <div class="answer_one_div">
          <div class="answer_one_div_k">
            <div>
            </div>
            未做
          </div>
          <div class="answer_one_div_k">
            <div>
            </div>
            已做
          </div>
          <div class="answer_one_div_k">
            <div>
            </div>
            标记
          </div>
          <div class="answer_one_div_k">
            <div>
            </div>
            当前
          </div>
        </div>
      </div>
      <!--选项卡板块-->
      <div class="answer_two">
        单选题
        <div class="radio">

          <div v-on:click="cardClick(subRadio,index,index+1)" :class="subRadio.cardStyle"
               v-for="(subRadio, index) in subRadio">{{index+1}}
          </div>
        </div>
        多选题
        <div class="check">
          <div v-on:click="cardClick(subCheck,index,subRadio.length+(index+1))" :class="subCheck.cardStyle"
               v-for="(subCheck, index) in subCheck">{{subRadio.length+(index+1)}}
          </div>
        </div>
        判断题
        <div class="judge">
          <div v-on:click="cardClick(subJudge,index,(subRadio.length+subCheck.length)+(index+1))"
               :class="subJudge.cardStyle" v-for="(subJudge, index) in subJudge">
            {{(subRadio.length+subCheck.length)+(index+1)}}
          </div>
        </div>

        填空题
        <div class="tiankong">
          <div v-on:click="cardClick(subFill,index,(subRadio.length+subCheck.length+subJudge.length)+(index+1))"
               :class="subFill.cardStyle" v-for="(subFill, index) in subFill">
            {{(subRadio.length+subCheck.length+subJudge.length)+(index+1)}}
          </div>
        </div>
      </div>

    </div>


  </div>
</template>

<script>
  export default {

    data() {
      return {
        extractQuestion: '',//专题考试抽题
        current: 2,
        loading: false,//提交试卷
        spinShow: false,//加载中

        topicNum: '',//总共多少道题
        branch: '',//总分
        qualified: '',//合格分数
        examTime: '',//考试时间
        dan: '',
        duo: '',
        pan: '',
        tian: '',
        danfen: '',
        duofen: '',
        panfen: '',
        tianfen: '',
        countDown: null,//倒计时
        minute: '',//分秒
        moment: '',//开始的时间
        chuTime: '',//初始时间

        switchNum: 0,//实时监听已答题数
        inputValue:'',//填空输入值
        subRadio: [],//单选题
        subCheck: [],//多选
        subJudge: [],//判断
        subFill: [],//填空


        content: '',//题目内容
        items: [],//题目选项
        Diagnosis: 1,//1单选题2多选题 3选判断
        title: 1,//题号

        signBtn: '标记',
        hoverBiao: true,

        modal1: false,//弹窗
        templateId: '',//模板id
      }
    },
    methods: {


      stripscript: function (s) {
    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
    var rs = "";
    for (var i = 0; i < s.length; i++) {
      rs = rs + s.substr(i, 1).replace(pattern, '');
    }
    return rs;
  },
      ok() {
        this.$Message.info('交卷成功');
        this.Submission();
      },
      Submission() {  //提交试卷
        console.log(this.subRadio);
        console.log(this.subCheck);
        console.log(this.subJudge);
        var questionAnswers = [];
//                    单选题
        for (var i = 0; i < this.subRadio.length; i++) {
          var daan = '';
          var aa = '' + this.subRadio[i].answer
          var z = aa.split('');
          for (var j = 0; j < z.length; j++) {
            if (this.subRadio[i].answer == 0) { //a
              var dd = '' + daan;
              console.log(dd, '****')
              daan = dd + 'A'

            }
            if (this.subRadio[i].answer == 1) { //b
              var dd = '' + daan;
              daan = dd + 'B'
            }
            if (this.subRadio[i].answer == 2) { //c
              var dd = '' + daan;
              daan = dd + 'C'
            }
            if (this.subRadio[i].answer == 3) { //d
              var dd = '' + daan;
              daan = dd + 'D'
            }
          }
          var mark
          if (this.subRadio[i].stBiao == false) {
            mark = 0
          } else {
            mark = 1
          }
          console.log(daan, '------------------')
          questionAnswers.push({
            questionId: this.subRadio[i].id,
            questionType: this.subRadio[i].type,
            userAnswers: daan,//用户答案
            isMark: mark,
          })
        }
//          多选题
        console.log("多选的长度：" + this.subCheck.length);
        for (var i = 0; i < this.subCheck.length; i++) {
          var daan = '';
          var aa = '' + this.subCheck[i].answer;
          var z = aa.split('');
          for (var j = 0; j < z.length; j++) {
            if (this.subCheck[i].answer[j] == 0) { //a
              var dd = '' + daan;
              daan = dd + 'A';
              daan = daan.split('')
              daan = daan.sort(function (a, b) {
                if (a.toString().toLowerCase() > b.toString().toLowerCase()) return 1;
                return -1;
              })
            }
            if (this.subCheck[i].answer[j] == 1) { //b
              var dd = '' + daan;
              daan = dd + 'B'
              daan = daan.split('')
              daan = daan.sort(function (a, b) {
                if (a.toString().toLowerCase() > b.toString().toLowerCase()) return 1;
                return -1;
              })
            }
            if (this.subCheck[i].answer[j] == 2) { //c
              var dd = '' + daan;
              daan = dd + 'C'
              daan = daan.split('')
              daan = daan.sort(function (a, b) {
                if (a.toString().toLowerCase() > b.toString().toLowerCase()) return 1;
                return -1;
              })
            }
            if (this.subCheck[i].answer[j] == 3) { //d
              var dd = '' + daan;
              daan = dd + 'D'
              daan = daan.split('')
              daan = daan.sort(function (a, b) {
                if (a.toString().toLowerCase() > b.toString().toLowerCase()) return 1;
                return -1;
              })
            }
          }
          var mark
          if (this.subCheck[i].stBiao == false) {
            mark = 0
          } else {
            mark = 1
          }
          console.log(daan);
          var daanVal = []; //答案数组
          for (var t = 0; t < daan.length; t++) {
            if (daan[t] == ",") {
            } else {
              daanVal.push(daan[t])
            }
          }
          console.log(daanVal);
          daanVal = daanVal.join(",");
          console.log(daanVal);
          questionAnswers.push({
            questionId: this.subCheck[i].id,
            questionType: this.subCheck[i].type,
            userAnswers: daanVal,//用户答案
            isMark: mark,
          })
        }
//          判断题
        for (var i = 0; i < this.subJudge.length; i++) {
          var daan = '';
          var aa = '' + this.subJudge[i].answer
          var z = aa.split('');
          for (var j = 0; j < z.length; j++) {
            if (this.subJudge[i].answer == 0) { //a
              var dd = '' + daan;
              daan = dd + 'A'
            }
            if (this.subJudge[i].answer == 1) { //b
              var dd = '' + daan;
              daan = dd + 'B'
            }
            if (this.subJudge[i].answer == 2) { //c
              var dd = '' + daan;
              daan = dd + 'C'
            }
            if (this.subJudge[i].answer == 3) { //d
              var dd = '' + daan;
              daan = dd + 'D'
            }
          }
          var mark
          if (this.subJudge[i].stBiao == false) {
            mark = 0
          } else {
            mark = 1
          }

          questionAnswers.push({
            questionId: this.subJudge[i].id,
            questionType: this.subJudge[i].type,
            userAnswers: daan,//用户答案
            isMark: mark,
          })
        }

        for (var i = 0; i < this.subFill.length; i++) {
          var daan = '';
          var aa = this.subFill[i].answer;
          var z = this.stripscript(aa);

          var mark
          if (this.subFill[i].stBiao == false) {
            mark = 0
          } else {
            mark = 1
          }
          questionAnswers.push({
            questionId: this.subFill[i].id,
            questionType: this.subFill[i].type,
            userAnswers: z,//用户答案
            isMark: mark,
          })
        }

//发送数据
        console.log(questionAnswers)
        var examId = this.$route.query.examId//专题id
        var id = this.$cookies.get('pcexam_id');
        var time = this.chuTime - this.countDown
        this.$axios({
          url: 'web/subject/exam/submit',
          method: 'POST',
          data: {
            templateId: this.templateId,//模板id
            subjectId: examId, //专题id
            examTime: time,//考试用时秒
            beginTime: this.moment,//考试开始时间
            userId: id,//用户id
            questionAnswers: questionAnswers//题的数组
          },
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function (data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
          var a = this.$route.query.examId;
          var b = this.$route.query.examname
          this.$router.push({  //核心语句
            path: '/wholeMock/resultExam',   //跳转的路径
            query: {           //路由传参时push和query搭配使用 ，作用时传递参数
              examDetailId: response.data.examDetailId,
              examId: a,
              examname: b,
            }
          })
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('提交失败！')
        });
      },
      cancel() {
        console.log("关闭")
        this.loading = false//弹窗
      },
      up: function () {//上一题
        this.inputValue='';
        this.switchNum1(); //实时监听已达多少题
        console.log(this.title - 1)
        if ((this.title - 1) < this.subRadio.length) {//单选
          var iidx = this.title - 2;
          if (iidx < 0) {
            this.$Message.warning('已经是第一页了');
          } else { //渲染
            console.log("去单选的第" + iidx);
            if (this.subRadio[this.title - 1].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subRadio[this.title - 1].cardStyle.split('lan');
              this.subRadio[this.title - 1].cardStyle = a;
            }
            var acc = this.subRadio[iidx].cardStyle;//当前位置的蓝色
            this.subRadio[iidx].cardStyle = acc + ' lan'
            //重新赋值
            this.content = this.subRadio[iidx].content;//渲染题目
            this.title = this.title - 1;//渲染题号
            this.items = [];
            if (this.subRadio[this.title - 1].optionA == '' || this.subRadio[this.title - 1].optionA == null) {
            } else {
              this.items.push({one: this.subRadio[this.title - 1].optionA, state: 0})
            }
            if (this.subRadio[this.title - 1].optionB == '' || this.subRadio[this.title - 1].optionB == null) {
            } else {
              this.items.push({one: this.subRadio[this.title - 1].optionB, state: 0})
            }
            if (this.subRadio[this.title - 1].optionC == '' || this.subRadio[this.title - 1].optionC == null) {
            } else {
              this.items.push({one: this.subRadio[this.title - 1].optionC, state: 0})
            }
            if (this.subRadio[this.title - 1].optionD == '' || this.subRadio[this.title - 1].optionD == null) {
            } else {
              this.items.push({one: this.subRadio[this.title - 1].optionD, state: 0})
            }
            if (this.subRadio[this.title - 1].optionE == '' || this.subRadio[this.title - 1].optionE == null) {
            } else {
              this.items.push({one: this.subRadio[this.title - 1].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subRadio[this.title - 1].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //      答题卡信息回显----预防出问题
            var arr = '' + this.subRadio[iidx].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }

          }
        }
        else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length)) {//多选
          var iidx = this.title - 2;
          if (iidx < this.subRadio.length) {
            console.log("去单选的" + (this.subRadio.length - 1))
            this.Diagnosis = 1;//单选题赋值
            var j = this.subRadio.length - 1;
            if (this.subCheck[0].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subCheck[0].cardStyle.split('lan');
              this.subCheck[0].cardStyle = a;
            }
            var acc = this.subRadio[j].cardStyle;//当前位置的蓝色
            this.subRadio[j].cardStyle = acc + ' lan'
            //重新赋值
            this.content = this.subRadio[j].content;//渲染题目
            this.title = this.title - 1;//渲染题号
            this.items = [];
            if (this.subRadio[this.subRadio.length - 1].optionA == '' || this.subRadio[this.subRadio.length - 1].optionA == null) {
            } else {
              this.items.push({one: this.subRadio[this.subRadio.length - 1].optionA, state: 0})
            }
            if (this.subRadio[this.subRadio.length - 1].optionB == '' || this.subRadio[this.subRadio.length - 1].optionB == null) {
            } else {
              this.items.push({one: this.subRadio[this.subRadio.length - 1].optionB, state: 0})
            }
            if (this.subRadio[this.subRadio.length - 1].optionC == '' || this.subRadio[this.subRadio.length - 1].optionC == null) {
            } else {
              this.items.push({one: this.subRadio[this.subRadio.length - 1].optionC, state: 0})
            }
            if (this.subRadio[this.subRadio.length - 1].optionD == '' || this.subRadio[this.subRadio.length - 1].optionD == null) {
            } else {
              this.items.push({one: this.subRadio[this.subRadio.length - 1].optionD, state: 0})
            }
            if (this.subRadio[this.subRadio.length - 1].optionE == '' || this.subRadio[this.subRadio.length - 1].optionE == null) {
            } else {
              this.items.push({one: this.subRadio[this.subRadio.length - 1].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subRadio[this.subRadio.length - 1].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(上一个多选去单选)
            var arr = '' + this.subRadio[j].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          } else { //渲染
            console.log("去多选的第" + (iidx - this.subRadio.length))
            var j = (this.title - 1) - this.subRadio.length;
            if (this.subCheck[j].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subCheck[j].cardStyle.split('lan');
              this.subCheck[j].cardStyle = a;
            }
            var acc = this.subCheck[iidx - this.subRadio.length].cardStyle;//当前位置的蓝色
            this.subCheck[iidx - this.subRadio.length].cardStyle = acc + ' lan'
            //重新赋值
            this.content = this.subCheck[iidx - this.subRadio.length].content;//渲染题目
            this.title = this.title - 1;//渲染题号
            this.items = [];
            if (this.subCheck[iidx - this.subRadio.length].optionA == '' || this.subCheck[iidx - this.subRadio.length].optionA == null) {
            } else {
              this.items.push({one: this.subCheck[iidx - this.subRadio.length].optionA, state: 0})
            }
            if (this.subCheck[iidx - this.subRadio.length].optionB == '' || this.subCheck[iidx - this.subRadio.length].optionB == null) {
            } else {
              this.items.push({one: this.subCheck[iidx - this.subRadio.length].optionB, state: 0})
            }
            if (this.subCheck[iidx - this.subRadio.length].optionC == '' || this.subCheck[iidx - this.subRadio.length].optionC == null) {
            } else {
              this.items.push({one: this.subCheck[iidx - this.subRadio.length].optionC, state: 0})
            }
            if (this.subCheck[iidx - this.subRadio.length].optionD == '' || this.subCheck[iidx - this.subRadio.length].optionD == null) {
            } else {
              this.items.push({one: this.subCheck[iidx - this.subRadio.length].optionD, state: 0})
            }
            if (this.subCheck[iidx - this.subRadio.length].optionE == '' || this.subCheck[iidx - this.subRadio.length].optionE == null) {
            } else {
              this.items.push({one: this.subCheck[iidx - this.subRadio.length].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subCheck[iidx - this.subRadio.length].stBiao == true) {
              console.log("true")
              console.log(this.subCheck[iidx - this.subRadio.length])
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(多选)
            var arr = '' + this.subCheck[iidx - this.subRadio.length].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          }
        }
        else if((this.title - 1) < (this.subRadio.length + this.subCheck.length + this.subJudge.length)) {//判断
          var iidx = this.title - 2;
          if (iidx < (this.subRadio.length + this.subCheck.length)) {
            console.log("去多选的" + (this.subCheck.length - 1))
            this.Diagnosis = 2;//选题赋值
            if (this.subJudge[0].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subJudge[0].cardStyle.split('lan');
              this.subJudge[0].cardStyle = a;
            }
            var acc = this.subCheck[this.subCheck.length - 1].cardStyle;//当前位置的蓝色
            this.subCheck[this.subCheck.length - 1].cardStyle = acc + ' lan'
            //重新赋值
            this.content = this.subCheck[this.subCheck.length - 1].content;//渲染题目
            this.title = this.title - 1;//渲染题号
            this.items = [];
            if (this.subCheck[this.subCheck.length - 1].optionA == '' || this.subCheck[this.subCheck.length - 1].optionA == null) {
            } else {
              this.items.push({one: this.subCheck[this.subCheck.length - 1].optionA, state: 0})
            }
            if (this.subCheck[this.subCheck.length - 1].optionB == '' || this.subCheck[this.subCheck.length - 1].optionB == null) {
            } else {
              this.items.push({one: this.subCheck[this.subCheck.length - 1].optionB, state: 0})
            }
            if (this.subCheck[this.subCheck.length - 1].optionC == '' || this.subCheck[this.subCheck.length - 1].optionC == null) {
            } else {
              this.items.push({one: this.subCheck[this.subCheck.length - 1].optionC, state: 0})
            }
            if (this.subCheck[this.subCheck.length - 1].optionD == '' || this.subCheck[this.subCheck.length - 1].optionD == null) {
            } else {
              this.items.push({one: this.subCheck[this.subCheck.length - 1].optionD, state: 0})
            }
            if (this.subCheck[this.subCheck.length - 1].optionE == '' || this.subCheck[this.subCheck.length - 1].optionE == null) {
            } else {
              this.items.push({one: this.subCheck[this.subCheck.length - 1].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subCheck[this.subCheck.length - 1].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(判断去多选)
            var arr = '' + this.subCheck[this.subCheck.length - 1].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          } else { //渲染
            console.log("去判断的第" + (iidx - (this.subRadio.length + this.subCheck.length)))
            var j = (this.title - 1) - this.subRadio.length - this.subCheck.length;
            if (this.subJudge[j].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subJudge[j].cardStyle.split('lan');
              this.subJudge[j].cardStyle = a;
            }
            var acc = this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].cardStyle;//当前位置的蓝色
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].cardStyle = acc + ' lan'
            //重新赋值
            this.content = this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].content;//渲染题目
            this.title = this.title - 1;//渲染题号
            this.items = [];
            if (this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionA == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionA == null) {
            } else {
              this.items.push({
                one: this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionA,
                state: 0
              })
            }
            if (this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionB == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionB == null) {
            } else {
              this.items.push({
                one: this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionB,
                state: 0
              })
            }
            if (this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionC == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionC == null) {
            } else {
              this.items.push({
                one: this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionC,
                state: 0
              })
            }
            if (this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionD == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionD == null) {
            } else {
              this.items.push({
                one: this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionD,
                state: 0
              })
            }
            if (this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionE == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionE == null) {
            } else {
              this.items.push({
                one: this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].optionE,
                state: 0
              })
            }
            //查看是否标记了
            if (this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(判断)
            var arr = '' + this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          }
        }
        else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length+ this.subJudge.length + this.subFill.length)){//填空
          var iidx = this.title - 2;
          console.log(iidx);
          if (iidx < (this.subRadio.length + this.subCheck.length+this.subJudge.length)) {
//            alert("填空1");
            console.log("去多选的" + (this.subJudge.length - 1))
            this.Diagnosis = 3;//选题赋值
            if (this.subFill[0].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subFill[0].cardStyle.split('lan');
              this.subFill[0].cardStyle = a;
            }
            var acc = this.subJudge[this.subJudge.length - 1].cardStyle;//当前位置的蓝色
            this.subJudge[this.subJudge.length - 1].cardStyle = acc + ' lan';
            //重新赋值
            this.content = this.subJudge[this.subJudge.length - 1].content;//渲染题目
            console.log(this.content);
            this.title = this.title - 1;//渲染题号
            this.items = [];
            console.log(this.subJudge[this.subJudge.length - 1].optionA);
            if (this.subJudge[this.subJudge.length - 1].optionA == '' || this.subJudge[this.subJudge.length - 1].optionA == null) {
              console.log("a为空")
            } else {
              console.log("a不为空")
              this.items.push({one: this.subJudge[this.subJudge.length - 1].optionA, state: 0})
              console.log( this.items);
            }
            if (this.subJudge[this.subJudge.length - 1].optionB == '' || this.subJudge[this.subJudge.length - 1].optionB == null) {
            } else {
              this.items.push({one: this.subJudge[this.subJudge.length - 1].optionB, state: 0})
            }
            if (this.subJudge[this.subJudge.length - 1].optionC == '' || this.subJudge[this.subJudge.length - 1].optionC == null) {
            } else {
              this.items.push({one: this.subJudge[this.subJudge.length - 1].optionC, state: 0})
            }
            if (this.subJudge[this.subJudge.length - 1].optionD == '' || this.subJudge[this.subJudge.length - 1].optionD == null) {
            } else {
              this.items.push({one: this.subJudge[this.subJudge.length - 1].optionD, state: 0})
            }
            if (this.subJudge[this.subJudge.length - 1].optionE == '' || this.subJudge[this.subJudge.length - 1].optionE == null) {
            } else {
              this.items.push({one: this.subJudge[this.subJudge.length - 1].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subJudge[this.subJudge.length - 1].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(判断去多选)
            var arr = '' + this.subJudge[this.subJudge.length - 1].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          }else {
//            alert("填空2");
            console.log("去判断的第" + (iidx - (this.subRadio.length + this.subCheck.length+ this.subJudge.length)))
            var j = (this.title - 1) - this.subRadio.length - this.subCheck.length - this.subJudge.length;
            if (this.subFill[j].cardStyle.indexOf("lan") != -1) {//删除上一个颜色
              var a = this.subFill[j].cardStyle.split('lan');
              this.subFill[j].cardStyle = a;
            }
            var acc = this.subFill[iidx - (this.subRadio.length + this.subCheck.length+ this.subJudge.length)].cardStyle;//当前位置的蓝色
            this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].cardStyle = acc + ' lan'
            //重新赋值
            this.content = this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].content;//渲染题目
            this.title = this.title - 1;//渲染题号
            this.inputValue = this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].answer;
            // this.items = [];
            // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionA == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionA == null) {
            // } else {
            //   this.items.push({
            //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionA,
            //     state: 0
            //   })
            // }
            // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionB == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge,length)].optionB == null) {
            // } else {
            //   this.items.push({
            //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionB,
            //     state: 0
            //   })
            // }
            // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionC == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionC == null) {
            // } else {
            //   this.items.push({
            //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionC,
            //     state: 0
            //   })
            // }
            // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionD == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionD == null) {
            // } else {
            //   this.items.push({
            //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionD,
            //     state: 0
            //   })
            // }
            // if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionE == '' || this.subJudge[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionE == null) {
            // } else {
            //   this.items.push({
            //     one: this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].optionE,
            //     state: 0
            //   })
            // }
            //查看是否标记了
            if (this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(判断)
            this.inputValue = this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].answer;

          }
        }
      },
      enderingr: function (iidx) {
        // /封装的渲染函数
        //点击答题卡取消上一个div蓝色
        if ((this.title - 1) < this.subRadio.length) {//单选
          if (this.subRadio[this.title - 1].cardStyle.indexOf("lan") != -1) {
            var a = this.subRadio[this.title - 1].cardStyle.split('lan');
            this.subRadio[this.title - 1].cardStyle = a;
          }
          this.content = this.subRadio[iidx].content;//渲染题目
          this.title = this.title + 1;//渲染题号
          this.items = [];
          if (this.subRadio[iidx].optionA == '' || this.subRadio[iidx].optionA == null) {
          } else {
            this.items.push({one: this.subRadio[iidx].optionA, state: 0})
          }
          if (this.subRadio[iidx].optionB == '' || this.subRadio[iidx].optionB == null) {
          } else {
            this.items.push({one: this.subRadio[iidx].optionB, state: 0})
          }
          if (this.subRadio[iidx].optionC == '' || this.subRadio[iidx].optionC == null) {
          } else {
            this.items.push({one: this.subRadio[iidx].optionC, state: 0})
          }
          if (this.subRadio[iidx].optionD == '' || this.subRadio[iidx].optionD == null) {
          } else {
            this.items.push({one: this.subRadio[iidx].optionD, state: 0})
          }
          if (this.subRadio[iidx].optionE == '' || this.subRadio[iidx].optionE == null) {
          } else {
            this.items.push({one: this.subRadio[iidx].optionE, state: 0})
          }
          //查看是否标记了
          if (this.subRadio[iidx].stBiao == true) {
            console.log("true")
            this.signBtn = '取消标记';
            this.hoverBiao = false
          } else {
            console.log("false")
            this.signBtn = '标记';
            this.hoverBiao = true
          }
        } else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length)) {//多选
          var j = (this.title - 1) - this.subRadio.length;
          if (this.subCheck[j].cardStyle.indexOf("lan") != -1) {
            var a = this.subCheck[j].cardStyle.split('lan');
            this.subCheck[j].cardStyle = a;
          }
          this.content = this.subCheck[iidx].content;//渲染题目
          this.title = this.title + 1;//渲染题号
          this.items = [];
          if (this.subCheck[iidx].optionA == '' || this.subCheck[iidx].optionA == null) {
          } else {
            this.items.push({one: this.subCheck[iidx].optionA, state: 0})
          }
          if (this.subCheck[iidx].optionB == '' || this.subCheck[iidx].optionB == null) {
          } else {
            this.items.push({one: this.subCheck[iidx].optionB, state: 0})
          }
          if (this.subCheck[iidx].optionC == '' || this.subCheck[iidx].optionC == null) {
          } else {
            this.items.push({one: this.subCheck[iidx].optionC, state: 0})
          }
          if (this.subCheck[iidx].optionD == '' || this.subCheck[iidx].optionD == null) {
          } else {
            this.items.push({one: this.subCheck[iidx].optionD, state: 0})
          }
          if (this.subCheck[iidx].optionE == '' || this.subCheck[iidx].optionE == null) {
          } else {
            this.items.push({one: this.subCheck[iidx].optionE, state: 0})
          }
          //查看是否标记了
          if (this.subCheck[iidx].stBiao == true) {
            console.log("true")
            this.signBtn = '取消标记';
            this.hoverBiao = false
          } else {
            console.log("false")
            this.signBtn = '标记';
            this.hoverBiao = true
          }
        } else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length + this.subJudge.length)) {//判断
          var j = (this.title - 1) - (this.subRadio.length + this.subCheck.length);
          if (this.subJudge[j].cardStyle.indexOf("lan") != -1) {
            var a = this.subJudge[j].cardStyle.split('lan');
            this.subJudge[j].cardStyle = a;
          }
          this.content = this.subJudge[iidx].content;//渲染题目
          this.title = this.title + 1;//渲染题号
          this.items = [];
          if (this.subJudge[iidx].optionA == '' || this.subJudge[iidx].optionA == null) {
          } else {
            this.items.push({one: this.subJudge[iidx].optionA, state: 0})
          }
          if (this.subJudge[iidx].optionB == '' || this.subJudge[iidx].optionB == null) {
          } else {
            this.items.push({one: this.subJudge[iidx].optionB, state: 0})
          }
          if (this.subJudge[iidx].optionC == '' || this.subJudge[iidx].optionC == null) {
          } else {
            this.items.push({one: this.subJudge[iidx].optionC, state: 0})
          }
          if (this.subJudge[iidx].optionD == '' || this.subJudge[iidx].optionD == null) {
          } else {
            this.items.push({one: this.subJudge[iidx].optionD, state: 0})
          }
          if (this.subJudge[iidx].optionE == '' || this.subJudge[iidx].optionE == null) {
          } else {
            this.items.push({one: this.subJudge[iidx].optionE, state: 0})
          }
          //查看是否标记了
          if (this.subJudge[iidx].stBiao == true) {
            console.log("true")
            this.signBtn = '取消标记';
            this.hoverBiao = false
          } else {
            console.log("false")
            this.signBtn = '标记';
            this.hoverBiao = true
          }
        }else {//填空
          var j = (this.title - 1) - (this.subRadio.length + this.subCheck.length + this.subJudge.length);
          if (this.subFill[j].cardStyle.indexOf("lan") != -1) {
            var a = this.subFill[j].cardStyle.split('lan');
            this.subFill[j].cardStyle = a;
          }
          this.content = this.subFill[iidx].content;//渲染题目
          this.title = this.title + 1;//渲染题号
          this.items = [];
          //查看是否标记了
          if (this.subFill[iidx].stBiao == true) {
            console.log("true")
            this.signBtn = '取消标记';
            this.hoverBiao = false
          } else {
            console.log("false")
            this.signBtn = '标记';
            this.hoverBiao = true
          }
        }

      },
      down: function () {//下一题
        this.inputValue='';
        this.switchNum1(); //实时监听已达多少题
        console.log(this.title);
        console.log(this.inputValue);
        console.log(this.subRadio.length);
        console.log(this.subCheck.length);
        console.log(this.subJudge.length);
        console.log(this.subFill.length);
        if ((this.title - 1) < this.subRadio.length) {//单选
          console.log("单选题");
          var iidx = this.title;
          if (iidx > (this.subRadio.length - 1)) { //已经是单选的最后一个了
            console.log("去多选的0");
            this.Diagnosis = 2;//选题赋值
            this.content = this.subCheck[0].content;//渲染题目
            this.title = this.title + 1;//渲染题号
            this.items = [];
            if (this.subCheck[0].optionA == '' || this.subCheck[0].optionA == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionA, state: 0})
            }
            if (this.subCheck[0].optionB == '' || this.subCheck[0].optionB == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionB, state: 0})
            }
            if (this.subCheck[0].optionC == '' || this.subCheck[0].optionC == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionC, state: 0})
            }
            if (this.subCheck[0].optionD == '' || this.subCheck[0].optionD == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionD, state: 0})
            }
            if (this.subCheck[0].optionE == '' || this.subCheck[0].optionE == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subCheck[0].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(单选转多选)
            var arr = '' + this.subCheck[0].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
            var i = (this.subRadio.length - 1); //清楚单选最后一个样式
            if (this.subRadio[i].cardStyle.indexOf("lan") != -1) {
              var a = this.subRadio[i].cardStyle.split('lan');
              this.subRadio[i].cardStyle = a;
            }
            var acc = this.subCheck[0].cardStyle;//当前位置的蓝色
            this.subCheck[0].cardStyle = acc + ' lan'
          }else{
            console.log("去单选的第" + iidx);
            this.enderingr(iidx);
            var acc = this.subRadio[iidx].cardStyle;//当前位置的蓝色
            this.subRadio[iidx].cardStyle = acc + ' lan'
            //答题卡信息回显----预防出问题(单选)
            var arr = '' + this.subRadio[iidx].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          }
        }
        else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length)) {//多选
          console.log("多选题");
          var iidx = this.title;
          if (iidx > ((this.subRadio.length + this.subCheck.length) - 1)) {
            console.log("去判断选的0")
            this.Diagnosis = 3;//选题赋值
            this.content = this.subJudge[0].content;//渲染题目
            this.title = this.title + 1;//渲染题号
            this.items = [];
            if (this.subJudge[0].optionA == '' || this.subJudge[0].optionA == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionA, state: 0})
            }
            if (this.subJudge[0].optionB == '' || this.subJudge[0].optionB == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionB, state: 0})
            }
            if (this.subJudge[0].optionC == '' || this.subJudge[0].optionC == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionC, state: 0})
            }
            if (this.subJudge[0].optionD == '' || this.subJudge[0].optionD == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionD, state: 0})
            }
            if (this.subJudge[0].optionE == '' || this.subJudge[0].optionE == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionE, state: 0})
            }
            //查看是否标记了
            if (this.subJudge[0].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(多选转判断)
            var arr = '' + this.subJudge[0].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
            var i = this.title - 1 - this.subRadio.length - 1; //清楚多选最后一个样式
            console.log(i)
            if (this.subCheck[i].cardStyle.indexOf("lan") != -1) {
              var a = this.subCheck[i].cardStyle.split('lan');
              this.subCheck[i].cardStyle = a;
            }
            var acc = this.subJudge[0].cardStyle;//当前位置的蓝色
            this.subJudge[0].cardStyle = acc + ' lan'
          }else {
            this.enderingr(iidx - this.subRadio.length);
            console.log("去多选的第" + (iidx - this.subRadio.length));
            var acc = this.subCheck[iidx - this.subRadio.length].cardStyle;//当前位置的蓝色
            this.subCheck[iidx - this.subRadio.length].cardStyle = acc + ' lan'
            //  答题卡信息回显----预防出问题(多选)
            var arr = '' + this.subCheck[iidx - this.subRadio.length].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          }
        }
        else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length+ this.subJudge.length)){//填空
          console.log("判断题");
          var iidx = this.title;
          if (iidx > ((this.subRadio.length + this.subCheck.length + this.subJudge.length) - 1)) {
            console.log("去填空的0");
            this.Diagnosis = 5;//选题赋值
            this.content = this.subFill[0].content;//渲染题目
            this.title = this.title + 1;//渲染题号
            this.items = [];
            if (this.subFill[0].optionA == '' || this.subFill[0].optionA == null) {
            } else {
              this.items.push({one: this.subFill[0].optionA, state: 0})
            }
            if (this.subFill[0].optionB == '' || this.subFill[0].optionB == null) {
            } else {
              this.items.push({one: this.subFill[0].optionB, state: 0})
            }
            if (this.subFill[0].optionC == '' || this.subFill[0].optionC == null) {
            } else {
              this.items.push({one: this.subFill[0].optionC, state: 0})
            }
            if (this.subFill[0].optionD == '' || this.subFill[0].optionD == null) {
            } else {
              this.items.push({one: this.subFill[0].optionD, state: 0})
            }
            if (this.subFill[0].optionE == '' || this.subFill[0].optionE == null) {
            } else {
              this.items.push({one: this.subFill[0].optionE, state: 0})
            }
            console.log(this.inputValue);
            //查看是否标记了
            if (this.subFill[0].stBiao == true) {
              console.log("true")
              this.signBtn = '取消标记';
              this.hoverBiao = false
            } else {
              console.log("false")
              this.signBtn = '标记';
              this.hoverBiao = true
            }
            //答题卡信息回显----预防出问题(多选转判断)

            var i = this.title - 1 - (this.subRadio.length + this.subCheck.length) - 1; //清楚判断最后一个样式
            console.log(i)
            if (this.subJudge[i].cardStyle.indexOf("lan") != -1) {
              var a = this.subJudge[i].cardStyle.split('lan');
              this.subJudge[i].cardStyle = a;

            }
            var acc = this.subFill[0].cardStyle;//当前位置的蓝色
            this.subFill[0].cardStyle = acc + ' lan';
            this.inputValue = this.subFill[i].answer;
          }else{
            this.enderingr(iidx - this.subRadio.length- this.subCheck.length );
            console.log("去多选的第" + (iidx - this.subRadio.length - this.subCheck.length));
            var acc = this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].cardStyle;//当前位置的蓝色
            this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].cardStyle = acc + ' lan'
            //  答题卡信息回显----预防出问题(多选)
            var arr = '' + this.subJudge[iidx - (this.subRadio.length + this.subCheck.length)].answer
            var strs = arr.split(""); //字符分割
            console.log(strs);
            for (var n = 0; n < strs.length; n++) {
              var nn = strs[n]
              this.items[nn].state = 1;
            }
          }
        }else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length+ this.subJudge.length + this.subFill.length)){//填空
          console.log("填空题");
          var iidx = this.title;
          if (iidx > ((this.subRadio.length + this.subCheck.length + this.subJudge.length+this.subFill.length) - 1)) {
            this.$Message.warning('已经是最后一个了');
          } else { //渲染
            console.log("去判断的第" + (iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)));
            this.enderingr(iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length));
            var acc = this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].cardStyle;//当前位置的蓝色
            this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].cardStyle = acc + ' lan'
            //    答题卡信息回显----预防出问题(多选)
            this.inputValue = this.subFill[iidx - (this.subRadio.length + this.subCheck.length + this.subJudge.length)].answer;
          }
        }
      },
      cardClick: function (type, index, title) {//答题卡点击
        this.inputValue='';
        this.switchNum1(); //实时监听已达多少题
        console.log(type);//总的类型
        console.log(index);//
        console.log(title);
        console.log(this.title)
        //点击答题卡取消上一个div蓝色
        if ((this.title - 1) < this.subRadio.length) {//单选
          if (this.subRadio[this.title - 1].cardStyle.indexOf("lan") != -1) {
            var a = this.subRadio[this.title - 1].cardStyle.split('lan');
            this.subRadio[this.title - 1].cardStyle = a;
          }
        } else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length)) {//多选
          var j = (this.title - 1) - this.subRadio.length;
          if (this.subCheck[j].cardStyle.indexOf("lan") != -1) {
            var a = this.subCheck[j].cardStyle.split('lan');
            this.subCheck[j].cardStyle = a;
          }
        } else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length + this.subJudge.length)) {//判断
          var j = (this.title - 1) - (this.subRadio.length + this.subCheck.length);
          if (this.subJudge[j].cardStyle.indexOf("lan") != -1) {
            var a = this.subJudge[j].cardStyle.split('lan');
            this.subJudge[j].cardStyle = a;
          }
        } else if ((this.title - 1) < (this.subRadio.length + this.subCheck.length + this.subJudge.length + this.subFill.length)) {//填空
          var j = (this.title - 1) - (this.subRadio.length + this.subCheck.length+this.subJudge.length);
          if (this.subFill[j].cardStyle.indexOf("lan") != -1) {
            var a = this.subFill[j].cardStyle.split('lan');
            this.subFill[j].cardStyle = a;
          }
        }

        this.content = type.content;//题目
        this.title = title;
        this.items = [];
        if (type.optionA == '' || type.optionA == null) {
        } else {
          this.items.push({one: type.optionA, state: 0})
        }
        if (type.optionB == '' || type.optionB == null) {
        } else {
          this.items.push({one: type.optionB, state: 0})
        }
        if (type.optionC == '' || type.optionC == null) {
        } else {
          this.items.push({one: type.optionC, state: 0})
        }
        if (type.optionD == '' || type.optionD == null) {
        } else {
          this.items.push({one: type.optionD, state: 0})
        }
        if (type.optionE == '' || type.optionE == null) {
        } else {
          this.items.push({one: type.optionE, state: 0})
        }
        if (type.stBiao == true) {
          console.log("true")
          this.signBtn = '取消标记';
          this.hoverBiao = false
        } else {
          console.log("false")
          this.signBtn = '标记';
          this.hoverBiao = true
        }
        //点击答题卡新的div加蓝色
        if (type.type == 1) {
          var acc = this.subRadio[index].cardStyle;
          this.subRadio[index].cardStyle = acc + ' lan'
          //答题卡信息回显
          var arr = '' + this.subRadio[index].answer
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n]
            this.items[nn].state = 1;
          }
        } else if (type.type == 2) {
          var acc = this.subCheck[index].cardStyle;
          this.subCheck[index].cardStyle = acc + ' lan'
          //答题卡信息回显
          var arr = '' + this.subCheck[index].answer
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n]
            this.items[nn].state = 1;
          }
        } else if (type.type == 3) {
          var acc = this.subJudge[index].cardStyle;
          this.subJudge[index].cardStyle = acc + ' lan';
          //答题卡信息回显
          var arr = '' + this.subJudge[index].answer
          var strs = arr.split(""); //字符分割
          console.log(strs);
          for (var n = 0; n < strs.length; n++) {
            var nn = strs[n]
            this.items[nn].state = 1;
          }
        }else if (type.type == 5) {
          var acc = this.subFill[index].cardStyle;
          this.subFill[index].cardStyle = acc + ' lan';
          //答题卡信息回显
         this.inputValue= this.subFill[index].answer

        }
        this.Diagnosis = type.type;//渲染数据的题型
      },
      toLoading() {
        this.modal1 = true;
        this.loading = true;
      },
      choice: function (obj) { //选择
        if (this.Diagnosis == 2) { //多选题
          var idx = (this.title - 1) - (this.subRadio.length);
          var style = this.subCheck[idx].cardStyle;
          this.subCheck[idx].cardStyle = style + ' yes';
          console.log(this.items);
          console.log(this.subCheck)
          if (this.items[obj].state == 1) {
            this.items[obj].state = 0
          } else {
            this.items[obj].state = 1
          }
          var arr = [];
          for (var m = 0; m < this.items.length; m++) {
            if (this.items[m].state == 1) {//选择的
              arr.push(m)
            }
          }
          if (arr.length == 0) {  //无数据
            console.log("无数据")
            var a = this.subCheck[idx].cardStyle.split('yes');
            var c = a.join('');
            console.log(c)
            this.subCheck[idx].cardStyle = c;
          } else {
            console.log("you数据")
          }
          this.subCheck[idx].answer = arr.join('');//存储用户选择的答案
        } else {//单选题
          if (this.Diagnosis == 1) {//单选题存储
            var style = this.subRadio[this.title - 1].cardStyle
            this.subRadio[this.title - 1].cardStyle = style + ' yes';
            this.subRadio[this.title - 1].answer = obj;//存储用户选择的答案
            console.log(this.subRadio)
          } else if (this.Diagnosis == 3) {//判断题存储
            var idx = (this.title - 1) - (this.subCheck.length + this.subRadio.length);
            var style = this.subJudge[idx].cardStyle;
            this.subJudge[idx].cardStyle = style + ' yes';
            this.subJudge[idx].answer = obj;//存储用户选择的答案
            console.log(idx)
          }
          //调节样式
          for (var z = 0; z < this.items.length; z++) {
            if (z == obj) {
              this.items[obj].state = 1
            } else {
              this.items[z].state = 0
            }
          }
        }
        this.switchNum1();
      },

      inputit:function(){
        console.log(this.subFill);
        if (this.Diagnosis == 5) {
          var idx = (this.title - 1) - (this.subCheck.length + this.subRadio.length + this.subJudge.length);
          var style = this.subFill[idx].cardStyle;
          this.subFill[idx].cardStyle = style + ' yes';
          this.subFill[idx].answer = this.inputValue;//存储用户选择的答案
          console.log(idx)
          if(this.subFill[idx].answer == ''){
            this.subFill[idx].cardStyle = 'not';

            if(this.subFill[idx].stBiao == true){
              this.subFill[idx].cardStyle =  'biao not';
            }
          }
        }

        },

      sign: function () {
        if (this.hoverBiao == true) {
          //标记
          if (this.Diagnosis == 1) { //单选题
            var style = this.subRadio[this.title - 1].cardStyle
            this.subRadio[this.title - 1].cardStyle = style + ' biao';
            this.subRadio[this.title - 1].stBiao = true
          } else if (this.Diagnosis == 2) {//多选
            var idx = (this.title - 1) - (this.subRadio.length);
            var style = this.subCheck[idx].cardStyle;
            this.subCheck[idx].cardStyle = style + ' biao';
            this.subCheck[idx].stBiao = true
          } else if(this.Diagnosis == 3) {//判断
            var idx = (this.title - 1) - (this.subRadio.length + this.subCheck.length);
            var style = this.subJudge[idx].cardStyle;
            this.subJudge[idx].cardStyle = style + ' biao';
            this.subJudge[idx].stBiao = true
          }else if(this.Diagnosis == 5) {//判断
            var idx = (this.title - 1) - (this.subRadio.length + this.subCheck.length +this.subJudge.length);
            var style = this.subFill[idx].cardStyle;
            this.subFill[idx].cardStyle = style + ' biao';
            this.subFill[idx].stBiao = true
          }
          this.signBtn = '取消标记';
          this.hoverBiao = false;
        }
        else {
          //取消标记问题
          if (this.Diagnosis == 1) { //单选题
            console.log(this.subRadio[this.title - 1].cardStyle)
            var a = this.subRadio[this.title - 1].cardStyle.split('biao');
            c
            var c = a.join('');
            this.subRadio[this.title - 1].cardStyle = c;
            this.subRadio[this.title - 1].stBiao = false
          }
          else if (this.Diagnosis == 2) {//多选
            var idx = (this.title - 1) - (this.subRadio.length);
            var style = this.subCheck[idx].cardStyle;
            var a = this.subCheck[idx].cardStyle.split('biao');
            var c = a.join('');
            this.subCheck[idx].cardStyle = c;
            this.subCheck[idx].stBiao = false
          } else if(this.Diagnosis == 3) {//判断
            var idx = (this.title - 1) - (this.subRadio.length + this.subCheck.length);
            var style = this.subJudge[idx].cardStyle;
            var a = this.subJudge[idx].cardStyle.split('biao');
            var c = a.join('');
            this.subJudge[idx].cardStyle = c;
            this.subJudge[idx].stBiao = false
          }
          else if(this.Diagnosis == 5) {//填空
            var idx = (this.title - 1) - (this.subRadio.length + this.subCheck.length+this.subJudge.length);
            var style = this.subFill[idx].cardStyle;
            var a = this.subFill[idx].cardStyle.split('biao');
            var c = a.join('');
            this.subFill[idx].cardStyle = c;
            this.subFill[idx].stBiao = false
          }
          this.signBtn = '标记';
          this.hoverBiao = true;
        }


      },
      topic: function () {
        //获取试题
        var examId = this.$route.query.examId
        this.$axios({
          url: '/web/subject/exam/extractQuestion/' + examId,
          method: 'GET',
          data: {},
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          transformRequest: [function (data) {  //json
            data = JSON.stringify(data);
            return data
          }],
        }).then((response) => {
          console.log(response.data);
//            渲染要求


          this.dan = response.data.examSetting.singleChoiceCount;//单选题数量
          this.duo = response.data.examSetting.multipleChoiceCount;//多选题数量
          this.pan = response.data.examSetting.judgeCount;//判断题数量
          this.tian = response.data.examSetting.gapFillingCount;//填空题数量
          this.danfen = response.data.examSetting.singleChoiceScore;//单选题分数
          this.duofen = response.data.examSetting.multipleChoiceScore;//多选题分数
          this.panfen = response.data.examSetting.judgeScore;//判断题分数
          this.tianfen = response.data.examSetting.gapFillingScore;//填空题分数
          this.topicNum = response.data.examSetting.singleChoiceCount + response.data.examSetting.multipleChoiceCount + response.data.examSetting.judgeCount+response.data.examSetting.gapFillingCount;//总共多少道题
          this.branch =(response.data.examSetting.singleChoiceCount * response.data.examSetting.singleChoiceScore) + (response.data.examSetting.multipleChoiceCount * response.data.examSetting.multipleChoiceScore) + (response.data.examSetting.judgeCount * response.data.examSetting.judgeScore) + (response.data.examSetting.gapFillingCount * response.data.examSetting.gapFillingScore);//总共多少分
          this.qualified = response.data.examSetting.qualifiedGrade;//合格分数
          this.examTime = response.data.examSetting.examTime  + '分';//+parseInt(response.data.examSetting.examTime % 60)+'秒';//考试时间
          this.countDown = parseInt(response.data.examSetting.examTime * 60);
          this.chuTime = parseInt(response.data.examSetting.examTime * 60);
          this.templateId = response.data.templateId
          this.countTime();
          //渲染答题卡
          for (var i = 0; i < response.data.questions.length; i++) {
            if (response.data.questions[i].type == '1') {
              if (response.data.questions[i].optionC == '' || response.data.questions[i].optionC == null) {
                this.subRadio.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式   yes biao lan
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else if (response.data.questions[i].optionD == '' || response.data.questions[i].optionD == null) {
                this.subRadio.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式   yes biao lan
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else if (response.data.questions[i].optionE == '' || response.data.questions[i].optionE == null) {
                this.subRadio.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  optionD: "D  " + response.data.questions[i].optionD,//题目选项D
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式   yes biao lan
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else {
                this.subRadio.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  optionD: "D  " + response.data.questions[i].optionD,//题目选项D
                  optionE: "E  " + response.data.questions[i].optionE,//题目选项E
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式   yes biao lan
                  answer: '',//用户答案
                  stBiao: false,
                });
              }
            } else if (response.data.questions[i].type == '2') {
              if (response.data.questions[i].optionC == '' || response.data.questions[i].optionC == null) {
                this.subCheck.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else if (response.data.questions[i].optionD == '' || response.data.questions[i].optionD == null) {
                this.subCheck.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else if (response.data.questions[i].optionE == '' || response.data.questions[i].optionE == null) {
                this.subCheck.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  optionD: "D  " + response.data.questions[i].optionD,//题目选项D
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else {
                this.subCheck.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  optionD: "D  " + response.data.questions[i].optionD,//题目选项D
                  optionE: "E  " + response.data.questions[i].optionE,//题目选项E
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              }

            } else if (response.data.questions[i].type == '3') {
              if (response.data.questions[i].optionC == '' || response.data.questions[i].optionC == null) {
                this.subJudge.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else if (response.data.questions[i].optionD == '' || response.data.questions[i].optionD == null) {
                this.subJudge.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else if (response.data.questions[i].optionE == '' || response.data.questions[i].optionE == null) {
                this.subJudge.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  optionD: "D  " + response.data.questions[i].optionD,//题目选项D
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              } else {
                this.subJudge.push({
                  id: response.data.questions[i].id,//题目id
                  content: response.data.questions[i].content,//题目内容
                  optionA: "A  " + response.data.questions[i].optionA,//题目选项A
                  optionB: "B  " + response.data.questions[i].optionB,//题目选项B
                  optionC: "C  " + response.data.questions[i].optionC,//题目选项C
                  optionD: "D  " + response.data.questions[i].optionD,//题目选项D
                  optionE: "E  " + response.data.questions[i].optionE,//题目选项D
                  type: response.data.questions[i].type,//题目类型
                  cardStyle: 'not',//答题卡样式
                  answer: '',//用户答案
                  stBiao: false,
                });
              }
            } else if (response.data.questions[i].type == '5') {
              this.subFill.push({
                id: response.data.questions[i].id,//题目id
                content: response.data.questions[i].content,//题目内容
                type: response.data.questions[i].type,//题目类型
                cardStyle: 'not',//答题卡样式
                answer: '',//用户答案
                stBiao: false,
              });
            } else {
              this.$Message.error('答题卡渲染失败！')
            }
          }
          //一开始渲染题
          if (this.subRadio.length != 0) {   //单选题是否有数据
            this.content = this.subRadio[0].content;//题目
//              var strArr = this.subRadio[0].option.split("&&");
            this.subRadio[0].cardStyle = 'not lan';
            this.items = [];
//             选项分开，
            if (this.subRadio[0].optionA == '' || this.subRadio[0].optionA == null) {
            } else {
              this.items.push({one: this.subRadio[0].optionA, state: 0})
            }
            if (this.subRadio[0].optionB == '' || this.subRadio[0].optionB == null) {
            } else {
              this.items.push({one: this.subRadio[0].optionB, state: 0})
            }
            if (this.subRadio[0].optionC == '' || this.subRadio[0].optionC == null) {
            } else {
              this.items.push({one: this.subRadio[0].optionC, state: 0})
            }
            if (this.subRadio[0].optionD == '' || this.subRadio[0].optionD == null) {
            } else {
              this.items.push({one: this.subRadio[0].optionD, state: 0})
            }
            if (this.subRadio[0].optionE == '' || this.subRadio[0].optionE == null) {
            } else {
              this.items.push({one: this.subRadio[0].optionE, state: 0})
            }

          } else if (this.subCheck.length != 0) { //多选题是否有数据
            this.content = this.subCheck[0].content;
            var strArr = this.subCheck[0].option.split("&&");
            this.items = [];
            if (this.subCheck[0].optionA == '' || this.subCheck[0].optionA == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionA, state: 0})
            }
            if (this.subCheck[0].optionB == '' || this.subCheck[0].optionB == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionB, state: 0})
            }
            if (this.subCheck[0].optionC == '' || this.subCheck[0].optionC == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionC, state: 0})
            }
            if (this.subCheck[0].optionD == '' || this.subCheck[0].optionD == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionD, state: 0})
            }
            if (this.subCheck[0].optionE == '' || this.subCheck[0].optionE == null) {
            } else {
              this.items.push({one: this.subCheck[0].optionE, state: 0})
            }

          } else if(this.subJudge.length != 0)  {//判断题是否有数据
            this.content = this.subJudge[0].content;
            var strArr = this.subJudge[0].option.split("&&");
            this.items = [];
            if (this.subJudge[0].optionA == '' || this.subJudge[0].optionA == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionA, state: 0})
            }
            if (this.subJudge[0].optionB == '' || this.subJudge[0].optionB == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionB, state: 0})
            }
            if (this.subJudge[0].optionC == '' || this.subJudge[0].optionC == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionC, state: 0})
            }
            if (this.subJudge[0].optionD == '' || this.subJudge[0].optionD == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionD, state: 0})
            }
            if (this.subJudge[0].optionE == '' || this.subJudge[0].optionE == null) {
            } else {
              this.items.push({one: this.subJudge[0].optionE, state: 0})
            }

          }else if(this.subFill.length != 0){
            this.content = this.subFill[0].content;
          }
          console.log(this.subCheck)
        }).catch((error) => {
          console.log("调取失败500");
          this.$Message.error('请求试题失败！')
          this.spinShow = false;
        });
      },
      countTime: function () {
        this.countDown--;
        this.minute = parseInt(this.countDown / 60) + '分' + parseInt(this.countDown % 60) + '秒';
        if (this.countDown <= 0) {
          //交卷
          this.Submission()
        } else {
          setTimeout(this.countTime, 1000)
        }
      },
      switchNum1: function () {  //实时监听已答多少题
        this.switchNum = 0;
        for (var i = 0; i < this.subRadio.length; i++) {
          console.log(typeof this.subRadio[i].answer)
          if (this.subRadio[i].answer == "") {

          } else {
            this.switchNum++
          }
        }
        for (var i = 0; i < this.subCheck.length; i++) {
          if (this.subCheck[i].answer == '') {
          } else {
            this.switchNum++
          }
        }
        for (var i = 0; i < this.subJudge.length; i++) {
          if (this.subJudge[i].answer == '') {
          } else {
            this.switchNum++
          }
        }
        for (var i = 0; i < this.subFill.length; i++) {
          if (this.subFill[i].answer == '') {
          } else {
            this.switchNum++
          }
        }
      }
    },
    beforeRouteLeave(to, from, next) {
      console.log(to)
      if (to.path === '/wholeMock/resultExam') {
        next()
      } else {
        const answer = window.confirm('确定要离开当前页面？离开后信息将不会被保存！')
        if (answer) {
          next()
        } else {
          next(false)
        }
      }
    },
    mounted: function () {
//          刷新页面提示
      let _this = this
      window.onbeforeunload = function (e) {
        var url = _this.$route.path;
        if (url == "/wholeMock/mockExam") {
          e = e || window.event;
          // 兼容IE8和Firefox 4之前的版本
          if (e) {
            e.returnValue = '退出后所填信息会清空，是否退出？';
          }
          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
          return '关闭提示';
        } else {
          window.onbeforeunload = null
        }
      };
      //获取试题
      this.topic();
      //存储开始时间
      var a = this.$moment().format();
      a = a.substring(0, a.length - 6);
      this.moment = a
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul li {
    list-style: none;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;

  }

  .content {
    /*padding-top: 138px;*/
  }

  .banner {
    background: white;
    margin-top: 14px;
    height: 60px;
    width: 100%;
    z-index: 1;
    box-shadow: 0px 0px 11px 0px rgba(4, 0, 0, 0.1);
  }

  .answer {
    width: 1082px;
    margin: auto;
    margin-top: 26px;
  }

  .banner_center {
    width: 1082px;
    margin: auto;
    line-height: 60px;
    color: #3b50a1;
    position: relative;
  }

  .banner_btn {
    position: absolute;
    right: 0;
    top: 15px;
    width: 100px;
    border-radius: 15px;
    font-size: 18px;
    color: white;
    background: #3b50a1;
    border: none;
    line-height: 30px;
    padding: 0;
    margin: 0;
  }

  .answer_one {
    width: 227px;
    height: 124px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 11px 0px rgba(4, 0, 0, 0.1);
    border-radius: 1px;
    padding: 18px 0 0 16px;
  }

  .answer_two {
    width: 227px;
    height: 642px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 5px 0px rgba(4, 0, 0, 0.1);
    border-radius: 1px;
    margin-top: 19px;
    margin-bottom: 20px;
    padding: 27px 0 27px 15px;
    overflow-y: auto;
  }

  .answer_three {
    position: relative;
    float: right;
    width: 826px;
    height: 785px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 15px 0px rgba(4, 0, 0, 0.1);
    border-radius: 1px;
    padding: 0 18px 0 18px;
  }

  .answer_one_div_k {
    width: 34px;
    margin-right: 14px;
    margin-top: 11px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
  }

  .answer_one_div_k div {
    display: inline-block;
    width: 37px;
    text-align: center;
    height: 35px;
    border-radius: 2px;
  }

  .answer_one_div_k:nth-of-type(1) div {
    border: 1px solid #BDBDBD;
    background: white;
  }

  .answer_one_div_k:nth-of-type(2) div {
    border: 1px solid #BDBDBD;
    background: #BDBDBD;
  }

  .answer_one_div_k:nth-of-type(3) div {
    background: #e9e9e9;
    background-image: url('../../assets/images/red.png');
    background-repeat: no-repeat;
    background-size: 17px 17px;
  }

  .answer_one_div_k:nth-of-type(4) div {
    border: 1px solid #3b50a1;
    background: #3b50a1;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .answer_two > div {
    margin-top: 10px;
  }

  .answer_two > div > div {
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    margin: 0 7px 9px 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 3px;
  }

  /*未做*/
  .not {
    color: #666666;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(189, 189, 189, 1);
  }

  /*已做*/
  .yes {
    color: #666666;
    border: 1px solid #E9E9E9;
    background: #E9E9E9;
  }

  /*当前*/
  .lan {
    background: rgba(59, 80, 161, 1);
    color: white;
    border: 1px solid rgba(59, 80, 161, 1);
  }

  /*标记*/
  .biao {
    background-image: url('../../assets/images/red.png');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    border: 1px solid #F94B5C;
  }

  /*答题部分*/
  .answer_three_header {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #BDBDBD;
    position: relative;
    font-size: 18px;
    line-height: 70px;
    color: rgba(51, 51, 51, 1);
  }

  .time {
    width: 200px;
    position: absolute;
    right: 0;
    top: 0;
    color: rgba(59, 80, 161, 1);
  }

  .zi_lan {
    color: #3B50A1;
  }

  .answer_three_tips {
    color: #999999;
    margin: 20px 0 44px 0;
  }

  .subject {
    line-height: 30px;
    font-size: 17px;
    margin-bottom: 10px;
  }

  ul li div {
    width: 20px;
    height: 20px;
    background: rgba(51, 51, 51, 0);
    border: 1px solid rgba(219, 219, 219, 1);
    border-radius: 50%;
    display: inline-block;
    margin: 0 14px -3px 0;
  }

  .li_lan {
    background: #3B50A1;
    border: 1px solid #3B50A1;
  }

  .li_red {
    background: #F94B5C;
    border: 1px solid #F94B5C;
  }

  .li_blue {
    background: blue;
    border: 1px solid blue;
  }

  .li_yellow {
    background: yellow;
    border: 1px solid yellow;
  }

  .upDown {
    position: absolute;
    bottom: 58px;
    width: 333px;
    left: 50%;
    margin-left: -117px;
    height: 40px;
  }

  .upDown div {
    width: 150px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(59, 80, 161, 1);
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    line-height: 37px;
    color: #3B50A1;
    cursor: pointer;
  }

  .upDown div:hover {
    background: #3B50A1;
    color: white;
  }

  .upDown div:nth-of-type(1) {
    margin-right: 15px;
  }

  .sign {
    cursor: pointer;
    margin-top: 38px;
    width: 95px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: rgba(249, 75, 92, 1);
    border: 1px solid rgba(249, 75, 92, 1);
    border-radius: 15px;
  }
  input:focus{outline:none;}

  .hoverBiao {
    background: #F94B5C;
    color: white;
  }
</style>
